<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>inputEx-yui3 - Bookmarklet Example3</title>

    <link rel="stylesheet" type="text/css" href="css/demo.css"/>
    <link rel="stylesheet" type="text/css" href="css/dpSyntaxHighlighter.css">
    <style>
        div.inputEx-Form-Mask div {
            background-color: #DDDDFF;
        }
        div#container2 {
            width: 400px
        }
    </style>
</head>

<body>

<p class='demoTitle'>inputEx - Form Usage</p>


<!-- Example 1 -->
<div class='exampleDiv'>

    <p class="title">Bookmarklet Form creation</p>

    <p><a id="bookmarklet" href="javascript:(function(){var%20w=window.d=document,l=d.location,ld='inputex.googlecode.com/svn/branches/inputex-yui3/js/inputex-loader.js';var%20_s=d.createElement('script');_s.src='http'+(l.location=='https'?'s':'')+'://'+ld;d.getElementsByTagName('head')[0].appendChild(_s);var%20main=function(){inputEx.YUI().use('node','form','stringfield','emailfield','urlfield','selectfield',function(Y,result){if(!result.success){Y.log('Load failure:'+result.msg,'warn','inputEx');}else{if(Y.get('#bookmarklet')!=null){Y.get('#bookmarklet').set('innerHTML','loaded')};if(Y.get('#container1')==null){Y.get('body').appendChild(Y.Node.create('<div id=container1 style=position:fixed;bottom:10px;left:'+(Y.get('body').get('winWidth')/2-200)+'px></div>'));}Y.inputEx.spacerUrl='../images/space.gif';new%20Y.inputEx.Form({fields:[{type:'select',inputParams:{label:'Title',name:'title',selectValues:['Mr','Mrs','Mme']}},{inputParams:{label:'Firstname',name:'firstname',required:true,value:'Jacques'}},{inputParams:{label:'Lastname',name:'lastname',value:'Dupont'}},{type:'email',inputParams:{label:'Email',name:'email'}},{type:'url',inputParams:{label:'Website',name:'website'}}],buttons:[{type:'submit',value:'Change'}],parentEl:'container1'}).render();}});};var%20st=function(){if(typeof(inputEx)==='undefined'){setTimeout(st,1000)}else{main()}};st();}())"
            >Drag this line on your Bookmark Toolbar and then click on it</a></p>


    <div class='demoContainer' id='container1'></div>

    <p>Tried to show the form on this page already? Now, make sure you have bookmarked the bookmarklet and then go to <a href="http://www.google.com">Google</a> and click on the bookmarklet.</p>

    <div class='codeContainer'>
        <textarea name="code" class="JScript">
    javascript:(function() {
        var w = window.d = document,l = d.location,ld='inputex.googlecode.com/svn/branches/inputex-yui3/js/inputex-loader.js';
        var _s = d.createElement('script');_s.src = 'http' + (l.location == 'https' ? 's' : '') + '://' + ld;
        d.getElementsByTagName('head')[0].appendChild(_s);
        var main = function() {
            inputEx.YUI().use('node','form','stringfield','emailfield','urlfield','selectfield', function(Y, result) {
                if (!result.success) {
                    Y.log('Load failure: ' + result.msg, 'warn', 'inputEx');
                } else {
                    if (Y.get('#bookmarklet')!=null){Y.get('#bookmarklet').set('innerHTML', 'loaded')};

                    if (Y.get('#container1')==null){
                        Y.get('body').appendChild(Y.Node.create('<div id="container1" style="position:fixed;bottom:10px;left:'+ (Y.get('body').get('winWidth')/2-200)+ 'px"></div>'));
                    }
                    Y.inputEx.spacerUrl = '../images/space.gif';
                    new Y.inputEx.Form({
                      fields: [
                        {type: 'select', inputParams: {label: 'Title', name: 'title', selectValues: ['Mr','Mrs','Mme'] } },
                        {inputParams: {label: 'Firstname', name: 'firstname', required: true, value:'Jacques' } },
                        {inputParams: {label: 'Lastname', name: 'lastname', value:'Dupont' } },
                        {type:'email', inputParams: {label: 'Email', name: 'email'}},
                        {type:'url', inputParams: {label: 'Website',name:'website'}}
                      ],
                      buttons: [{type: 'submit', value: 'Change'}],
                      parentEl: 'container1'
                    }).render();
                }
            });
        };
        var st = function() {if (typeof(inputEx) === 'undefined') {setTimeout(st, 1000)} else {main()}};
        st();
    }())
    </textarea>
    </div>

</div>


<script src="js/dpSyntaxHighlighter.js"></script>
<script language="javascript">
    dp.SyntaxHighlighter.HighlightAll('code');
</script>

</body>
</html>